<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // get 、get
      // const handler = {
      //   // 劫持读取操作
      //   get: function (target, key, obj) {
      //     if (key in target) return target;
      //     else throw Error("not exit");
      //   },
      //   // 截取更改
      //   set: function (target, key, newVal, obj) {
      //     console.log(target, key, newVal, obj);
      //   },
      // };

      // const myObj = {
      //   name: "测试",
      //   age: 18,
      //   address: {
      //     province: "四川",
      //     city: "成都",
      //   },
      // };

      // const t = new Proxy(myObj, handler);
      // t.age = 20;

      // apply
      const handler = {
        // 劫持读取操作
        get: function (target, key, obj) {
          console.log("GET");
          if (key in target) return target[key];
          else throw Error("not exit");
        },
        // 截取更改
        set: function (target, key, newVal, obj) {
          console.log("SET");
          target[key] = newVal;
        },
        apply(target, ctx, args) {
          console.log(target, ctx, args, arguments);
          return Reflect.apply(target, ctx, args) * 2;
        },
      };

      const sum = (l, r) => {
        return l + r;
      };

      const myObj = {
        name: "测试",
        age: 18,
        address: {
          province: "四川",
          city: "成都",
        },
      };

      const p = new Proxy(myObj, handler);

      console.log(p.name);
    </script>
  </body>
</html>
